<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.7.2.js"></script>

<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</head>
<div class="row">
	<div class="span4">哈哈哈</div>
	<div class="span8">啦啦啦</div>
	<div class="span1">啦啦啦</div>
	<div class="span1">啦啦啦</div>
</div>

<div class="container">
	<div class="row">
		<div class="span12">
			<h1>当当当当当</h1>
			<div class="row">
				<div class="span6">Level 2</div>
				<div class="span6">Level 2</div>
			</div>
		</div>
	</div>
</div>

<ul class="unstyled">
	<li>1111111</li>
	<li>2222222</li>
	<li>3333333</li>
</ul>

<table class="table-striped table-bordered">
	<tr>
		<td class="span2">1</td>
		<td class="span2">2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

<div class="span8">
	<form class="well form-horizontal">
		<fieldset>
			<div class="control-group">
				<label class="control-label" for="focusedInput">Focused
					input</label>
				<div class="controls">
					<input class="input-xlarge focused" id="focusedInput" type="text"
						value="This is focused…">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">Uneditable input</label>
				<div class="controls">
					<span class="input-xlarge uneditable-input">Some value here</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="disabledInput">Disabled
					input</label>
				<div class="controls">
					<input class="input-xlarge disabled" id="disabledInput" type="text"
						placeholder="Disabled input here…" disabled>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="optionsCheckbox2">Disabled
					checkbox</label>
				<div class="controls">
					<label class="checkbox"> <input type="checkbox"
						id="optionsCheckbox2" value="option1" disabled> This is a
						disabled checkbox </label>
				</div>
			</div>
			<div class="control-group warning">
				<label class="control-label" for="inputWarning">Input with
					warning</label>
				<div class="controls">
					<input type="text" id="inputWarning"> <span
						class="help-inline">Something may have gone wrong</span>
				</div>
			</div>
			<div class="control-group error">
				<label class="control-label" for="inputError">Input with
					error</label>
				<div class="controls">
					<input type="text" id="inputError"> <span
						class="help-inline">Please correct the error</span>
				</div>
			</div>
			<div class="control-group success">
				<label class="control-label" for="inputSuccess">Input with
					success</label>
				<div class="controls">
					<input type="text" id="inputSuccess" placeholder="啦啦啦"> <span
						class="help-inline">Woohoo!</span>
				</div>
			</div>
			<div class="control-group success">
				<label class="control-label" for="selectError">Select with
					success</label>
				<div class="controls">
					<select id="selectError">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select> <span class="help-inline">Woohoo!</span>
				</div>
			</div>
			<div class="form-actions">
				<button type="submit" class="btn btn-primary">Save changes</button>
				<button class="btn">Cancel</button>
			</div>
		</fieldset>
	</form>
</div>

<div class="container" id="login">

	<div class="span6">

		<form class="well form-horizontal" id="login_form" name="login"
			action="/signin" method="post">

			<fieldset>

				<legend>登录</legend>

				<div class="control-group">

					<input type="text" class="input-xlarge" name="username"
						id="username_input" value="" placeholder=邮箱 />

				</div>

				<div class="control-group" id="login_error">

					<input type="password" id="password_input" name="password"
						class="input-xlarge" placeholder=密码 />

				</div>

				<div class="form-action form-inline">

					<button type="submit" class="btn btn-large btn-success"
						id="submit_btn">登录</button>

					<label class="checkbox"> <input type="checkbox"
						id="keep_login_btn" checked="checked" /> 保持登录？ </label>

				</div>

				<div class="control-group" id="signup_link">

					<a href="#" onclick="javascript:forgetPassword();">忘记密码</a> | <a
						href="/signup">注册账号</a>

				</div>

			</fieldset>

		</form>

	</div>

</div>

<div class="btn-toolbar">
	<div class="btn-group">
		<button class="btn">1</button>
		<button class="btn">2</button>
		<button class="btn">3</button>
	</div>
	<div class="btn-group">
		<a class="btn btn-primary">1</a> <a class="btn btn-primary">2</a> <a
			class="btn btn-primary">3</a>
	</div>
</div>

<div class="span4 well pricehover">
	<h2>按钮组</h2>
	<div class="btn-group" style="margin: 9px 0;">
		<button class="btn btn-large btn-primary">Left</button>
		<button class="btn btn-large  btn-primary">Middle</button>
		<button class="btn   btn-large btn-primary">Right</button>
	</div>

</div>
<div class="span4 well pricehover">
	<h2>按钮工具条</h2>
	<div class="btn-toolbar">
		<div class="btn-group">
			<button class="btn">1</button>
			<button class="btn">2</button>
			<button class="btn">3</button>
			<button class="btn">4</button>
		</div>
		<div class="btn-group">
			<button class="btn">5</button>
			<button class="btn">6</button>
			<button class="btn">7</button>
		</div>
		<div class="btn-group">
			<button class="btn">8</button>
		</div>
	</div>
</div>

<div class="span8 well pricehover">

	<h3>按钮下拉菜单</h3>
	<p></p>
	<div class="btn-toolbar">
		<div class="btn-group">
			<button class="btn dropdown-toggle" data-toggle="dropdown">
				Action <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-primary dropdown-toggle"
				data-toggle="dropdown">
				Action <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
				Danger <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
	</div>
	<div class="btn-toolbar">
		<div class="btn-group">
			<button class="btn btn-warning dropdown-toggle"
				data-toggle="dropdown">
				Warning <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-success dropdown-toggle"
				data-toggle="dropdown">
				Success <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
				Info <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-inverse dropdown-toggle"
				data-toggle="dropdown">
				拉拉 <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a>
				</li>
				<li><a href="#">Another action</a>
				</li>
				<li><a href="#">Something else here</a>
				</li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a>
				</li>
			</ul>
		</div>
		<!-- /btn-group -->
	</div>
	<!-- /btn-toolbar -->
</div>


<div class="row">


	<div class="span5 well pricehover">
		<h2>基础tabs</h2>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">Home</a>
			</li>
			<li><a href="#">Profile</a>
			</li>
			<li><a href="#">Messages</a>
			</li>
		</ul>
	</div>
	<div class="span5 well pricehover">
		<h3>基础pills</h3>
		<ul class="nav nav-pills">
			<li class="active"><a href="#">Home</a>
			</li>
			<li><a href="#">Profile</a>
			</li>
			<li><a href="#">Messages</a>
			</li>
		</ul>
	</div>

</div>



<div class="row">
	<div class="span5 well pricehover">
		<h3>竖排tabs</h3>
		<ul class="nav nav-tabs nav-stacked">
			<li class="active"><a href="#">Home</a>
			</li>
			<li><a href="#">Profile</a>
			</li>
			<li><a href="#">Messages</a>
			</li>
		</ul>
	</div>


	<div class="span5 well pricehover">
		<h3>竖排pills</h3>
		<ul class="nav nav-pills nav-stacked">
			<li class="active"><a href="#">Home</a>
			</li>
			<li><a href="#">Profile</a>
			</li>
			<li><a href="#">Messages</a>
			</li>
		</ul>
	</div>

</div>


<div class="span5 well pricehover">
	<h2>基础Nav List</h2>
	<ul class="nav nav-list">
		<li class="nav-header">List header</li>
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#">Library</a></li>
		<li><a href="#">Applications</a></li>
		<li class="nav-header">Another list header</li>
		<li><a href="#">Profile</a></li>
		<li><a href="#">Settings</a></li>
		<li class="divider"></li>
		<li><a href="#">Help</a></li>
	</ul>
</div>

<div class="span5 well pricehover">
	<h3>图标List</h3>

	<ul class="nav nav-list">
		<li class="nav-header">List header</li>
		<li class="active"><a href="#"><i
				class="icon-white icon-home"></i> Home</a></li>
		<li><a href="#"><i class="icon-book"></i> Library</a></li>
		<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
		<li class="nav-header">Another list header</li>
		<li><a href="#"><i class="icon-user"></i> Profile</a></li>
		<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="icon-flag"></i> Help</a></li>
	</ul>

</div>




<div class="row">
	<div class="span5 well pricehover">
		<h3>pills式的下拉菜单</h3>
		<ul class="nav nav-pills">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Help</a></li>
			<li class="dropdown"><a class="dropdown-toggle"
				data-toggle="dropdown" href="#">Dropdown <b class="caret"></b> </a>
				<ul class="dropdown-menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="span5 well pricehover">
		<h3>tab式的下拉菜单</h3>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Help</a></li>
			<li class="dropdown"><a class="dropdown-toggle"
				data-toggle="dropdown" href="#">Dropdown <b class="caret"></b> </a>
				<ul class="dropdown-menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>


<div class="span10 well pricehover">
	<div class="navbar">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> </a> <a
					class="brand" href="#">Project name</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#">Home</a>
						</li>
						<li><a href="#">Link</a>
						</li>
						<li><a href="#">Link</a>
						</li>
						<li><a href="#">Link</a>
						</li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown <b class="caret"></b> </a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a>
								</li>
								<li><a href="#">Another action</a>
								</li>
								<li><a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li class="nav-header">Nav header</li>
								<li><a href="#">Separated link</a>
								</li>
								<li><a href="#">One more separated link</a>
								</li>
							</ul></li>
					</ul>
					<form class="navbar-search pull-left" action="">
						<input type="text" class="search-query span2" placeholder="Search">
					</form>
					<ul class="nav pull-right">
						<li><a href="#">Link</a>
						</li>
						<li class="divider-vertical"></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Dropdown <b class="caret"></b> </a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a>
								</li>
								<li><a href="#">Another action</a>
								</li>
								<li><a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a>
								</li>
							</ul></li>
					</ul>
				</div>
				<!-- /.nav-collapse -->
			</div>
		</div>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
</div>


<div class="span3 well pricehover">
	<h3>alert例子</h3>
	<div class="alert">
		<button type="button" class="close" data-dismiss="alert">&times;</button>
		<strong>测试</strong>这是alert info提醒区域.
	</div>
</div>


<div class="span4 well pricehover">
	<h3>alert例子</h3>
	<div class="alert alert-error">
		<button type="button" class="close" data-dismiss="alert">&times;</button>
		<strong>测试</strong>这是alert error提醒区域.
	</div>
</div>

<div class="span3 well pricehover">
	<h3>alert例子</h3>
	<div class="alert alert-success">
		<button type="button" class="close" data-dismiss="alert">&times;</button>
		<strong>测试</strong>这是alert success提醒区域.
	</div>
</div>


<div class="span3 well pricehover">
	<h3>基础</h3>
	<p>默认的进度条</p>
	<div class="progress">
		<div class="bar" style="width: 60%;"></div>
	</div>
</div>

<div class="span3 well pricehover">
	<h3>动画效果</h3>
	<p>带有条纹的动画效果进度条 (no IE).</p>
	<div class="progress progress-striped active">
		<div class="bar" style="width: 45%"></div>
	</div>
</div>
<div class="span4 well pricehover">
	<h3>Striped</h3>
	<p>使用透明度来生成条纹效果 (no IE).</p>
	<div class="progress progress-striped">
		<div class="bar" style="width: 20%;"></div>
	</div>


</div>


<div class="span4  pricehover">
	<h2>Wells</h2>
	<p>使用Well来显示插入效果</p>
	<div class="well">看！我是Well！</div>
</div>

<div class="span3 well pricehover">
	<h2>关闭图标</h2>
	<p>用于提醒区域，模式窗口(Modal)的关闭.</p>
	<p>
		<button class="close" style="float: none;">&times;</button>
	</p>
</div>





</html>